<template>

<!--  &lt;!&ndash;  概览统计&ndash;&gt;
  <el-row>
    <el-col :span="6">
      <el-statistic title="线索总数" :value="summaryData.totalClueCount"/>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="summaryData.effectiveActivityCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalActivityCount }}</template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="客户总数" :value="summaryData.totalCustomerCount"/>
    </el-col>
    <el-col :span="6">
      <el-statistic :value="summaryData.successTranAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            交易总额
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalTranAmount }}</template>
      </el-statistic>
    </el-col>
  </el-row>-->

  <el-row :gutter="20">
    <el-col :span="6">
      <el-statistic
          title="线索总数"
          :value="summaryData.totalClueCount"
          :value-style="{ color: '#3a8ee6', fontSize: '24px' }"
          :class="{ 'statistic-item': true, 'clue-count': true }"
      />
    </el-col>
    <el-col :span="6">
      <el-statistic
          :value="summaryData.effectiveActivityCount"
          :value-style="{ color: '#5cb85c', fontSize: '24px' }"
          :class="{ 'statistic-item': true, 'activity-count': true }"
      >
        <template #title>
          <div style="display: inline-flex; align-items: center; color: #5cb85c;">
            市场活动
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalActivityCount }}</template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic
          title="客户总数"
          :value="summaryData.totalCustomerCount"
          :value-style="{ color: '#f0ad4e', fontSize: '24px' }"
          :class="{ 'statistic-item': true, 'customer-count': true }"
      />
    </el-col>
    <el-col :span="6">
      <el-statistic
          :value="summaryData.successTranAmount"
          :value-style="{ color: '#d9534f', fontSize: '24px' }"
          :class="{ 'statistic-item': true, 'transaction-amount': true }"
      >
        <template #title>
          <div style="display: inline-flex; align-items: center; color: #d9534f;">
            交易总额
          </div>
        </template>
        <template #suffix>/{{ summaryData.totalTranAmount }}</template>
      </el-statistic>
    </el-col>
  </el-row>


  <!-- 销售漏斗图 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="saleFunnelChart" style="width: 40%;height:350px; margin: 10px;float: left;"></div>

  <!-- 线索来源图 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="sourcePieChart" style="width: 40%;height:350px; margin: 10px;float: left;"></div>

  <!--为ECharts定义一个div，指定好宽度和高度，用来显示市场活动统计柱状图-->
  <div id="activityBarChart" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"></div>

  <!--为ECharts定义一个div，指定好宽度和高度，用来显示线索统计柱状图-->
  <div id="clueBarChart" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"></div>

  <!--为ECharts定义一个div，指定好宽度和高度，用来显示客户统计柱状图-->
  <div id="customerBarChart" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"></div>

  <!--为ECharts定义一个div，指定好宽度和高度，用来显示交易统计柱状图-->
  <div id="tranBarChart" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"></div>

</template>

<script>
import {doGet} from "../http/httpRequest.js";
import * as echarts from 'echarts';

export default {
  name: "StatisticView",

  data() {
    return {
      //概览统计数据对象，初始值为空
      summaryData: {},
    }
  },

  mounted() {
    //加载概览统计数据
    this.loadSummary();
    //加载销售漏斗图
    this.loadSaleFunnelChart();
    //加载夏诺来源饼图
    this.loadSourcePieChart();
    this.loadActivityBarChart();
    this.loadClueBarChart();
    this.loadCustomerBarChart();
    this.loadTranBarChart();
  },

  methods: {
    //加载概览统计数据
    loadSummary() {
      doGet("/api/summary/data", {}).then(resp => {
        if (resp.data.code === 200) {
          this.summaryData = resp.data.data;
        }
      })
    },

    //加载销售漏斗图
    loadSaleFunnelChart() {
      //先查询数据，然后再渲染图，不能先渲染图（没有说护具，渲染不出来），然后再查据据
      doGet("/api/saleFunnel/data", {}).then(resp => {
        if (resp.data.code === 200) {
          let saleFunnelData = resp.data.data;

          /*//1、拿到页面上渲染图表的DOM元素
          var chartDom = document.getElementById('saleFunnelChart');
          //2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项（查看文档---》配置项手册）
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '销售漏斗图',
              left: 'center',
              top: 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
              trigger: 'item',
              //提示框浮层内容格式器，漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
              formatter: '{a} <br/>{b} : {c}'
            },
            //工具栏。
            toolbox: {
              //各工具配置项。
              feature: {
                //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                dataView: {
                  //是否不可编辑（只读）。
                  readOnly: false
                },
                //配置项还原。
                restore: {},
                //保存为图片。
                saveAsImage: {}
              }
            },
            //图列组件
            legend: {
              data: ['线索', '客户', '交易', '成交']
            },
            //系列列表
            series: [
              {
                //系列名称
                name: '销售漏斗数据统计',
                //图表的类型，funnel代表漏斗图
                type: 'funnel',
                //漏斗图组件离容器左侧的距离
                left: '10%',
                //漏斗图组件离容器上侧的距离
                top: 60,
                //漏斗图组件离容器下侧的距离
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside'
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                //数据项（系列中的数据内容，数组项可以为单个数值，也可以是对象值）
                /!*data: [
                  {value: 20, name: '成交'},
                  {value: 60, name: '交易'},
                  {value: 80, name: '客户'},
                  {value: 100, name: '线索'},
                ]*!/
                data: saleFunnelData
              }
            ]
          };
          //4、如果配置了可选项，就把可选项设置到空白的图表对象中
          option && myChart.setOption(option);*/


          //1、拿到页面上渲染图表的DOM元素
          var chartDom = document.getElementById('saleFunnelChart');
//2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
          var myChart = echarts.init(chartDom);
//3、配置可选项
          var option = {
            //标题组件
            title: {
              text: '销售漏斗图',
              left: 'center',
              top: 'bottom',
              textStyle: {
                color: '#333', // 更改标题颜色
                fontSize: 18 // 增加字体大小
              }
            },
            //提示框组件
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c}',
              backgroundColor: '#f5f5f5', // 添加背景色
              borderColor: '#ccc', // 添加边框颜色
              borderWidth: 1, // 添加边框宽度
              textStyle: {
                color: '#333' // 更改字体颜色
              }
            },
            //工具栏
            toolbox: {
              feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
              }
            },
            //图例组件
            legend: {
              data: ['线索', '客户', '交易', '成交'],
              itemWidth: 20, // 图例图标宽度
              itemHeight: 10, // 图例图标高度
              itemGap: 20, // 图例之间的间距
              textStyle: {
                color: '#333' // 更改字体颜色
              }
            },
            //系列列表
            series: [
              {
                name: '销售漏斗数据统计',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                  show: true,
                  position: 'inside',
                  color: '#333', // 更改字体颜色
                  fontSize: 14 // 增加字体大小
                },
                labelLine: {
                  length: 10,
                  lineStyle: {
                    width: 1,
                    type: 'solid'
                  }
                },
                itemStyle: {
                  borderColor: '#fff',
                  borderWidth: 1,
                  color: function (params) {
                    // 根据数据项索引设置不同的颜色
                    var colors = ['#FF6E76', '#FFB976', '#8BD3C7', '#6FCF97'];
                    return colors[params.dataIndex];
                  }
                },
                emphasis: {
                  label: {
                    fontSize: 20
                  }
                },
                data: saleFunnelData
              }
            ]
          };
//4、如果配置了可选项，就把可选项设置到空白的图表对象中
          option && myChart.setOption(option);

        }
      })

    },

    //加载线索来源饼图
    loadSourcePieChart() {
      //先查询数据，然后再渲染图，不能先渲染图（没有说护具，渲染不出来），然后再查据据
      doGet("/api/sourcePie/data", {}).then(resp => {
        if (resp.data.code === 200) {
          let sourcePieData = resp.data.data;
          /*//1、拿到页面上渲染图表的DOM元素
          var chartDom = document.getElementById('sourcePieChart');
          //2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项（查看文档---》配置项手册）
          var option = {
            title: {
              text: '线索来源饼图',
              left: 'center',
              top: 'bottom'
            },
            tooltip: {
              trigger: 'item'
            },
            //图列
            legend: {
              orient: 'horizontal',
              left: 'center'
            },
            //系列
            series: [
              {
                name: '线索来源统计',
                type: 'pie',
                //饼图的半径
                radius: '60%',
                //数据项
                /!*data: [
                  {value: 1048, name: 'Search Engine'},
                  {value: 735, name: 'Direct'},
                  {value: 580, name: 'Email'},
                  {value: 484, name: 'Union Ads'},
                  {value: 300, name: 'Video Ads'}
                ],*!/
                data: sourcePieData,
                //高亮状态的扇区和标签样式
                emphasis: {
                  itemStyle: {
                    //图形阴影的模糊大小
                    shadowBlur: 10,
                    //阴影水平方向上的偏移距离
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          //4、如果配置了可选项，就把可选项设置到空白的图表对象中
          option && myChart.setOption(option);*/


// 1、拿到页面上渲染图表的DOM元素
          var chartDom = document.getElementById('sourcePieChart');
// 2、使用echarts组件对dom进行初始化，得到一个空白的图表对象
          var myChart = echarts.init(chartDom);
// 3、配置可选项
          var option = {
            title: {
              text: '线索来源饼图',
              left: 'center',
              top: 'bottom',
              textStyle: { // 修改标题文字样式
                color: '#333', // 更改为深灰色
                fontSize: 18 // 增大字体大小
              }
            },
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'horizontal',
              left: 'center',
              itemWidth: 12, // 调整图例宽度
              itemHeight: 12, // 调整图例高度
              textStyle: { // 修改图例文字样式
                color: '#666' // 更改为灰色
              }
            },
            // 系列
            series: [
              {
                name: '线索来源统计',
                type: 'pie',
                radius: '60%',
                // 数据项
                data: sourcePieData,
                // 高亮状态的扇区和标签样式
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                },
                // 自定义颜色
                color: ['#ceff1c', '#2EC7C9','#2EC7C9', '#B6A2D3', '#5AB1EF', '#FFBF78'] // 添加自定义颜色数组
              }
            ]
          };
// 4、如果配置了可选项，就把可选项设置到空白的图表对象中
          option && myChart.setOption(option);

        }
      })
    },

    //加载市场活动柱状图
    loadActivityBarChart() {
      //先查询出来数据，然后再渲染图（不能颠倒，如果你先显示图表，但是没有数据，图表显示不出来）
      doGet("/api/statistic/activityBarChart", {}).then(resp => {
        if (resp.data.code === 200) {
          let activityBarDataArray = resp.data.data;

          /*//1、根据id获取页面dom元素对象，echarts图表到时候就显示在这个dom元素里面 <div> echarts就显示在这里 </div>
          var chartDom = document.getElementById('activityBarChart');
          //2、用echarts对象对要显示图标的dom元素区域进行初始化
          var myChart = echarts.init(chartDom);
          //3、配置可选项，也就是配置图表的各种显示参数（看文档-->配置项手册）
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '市场活动数据统计',
              //title 组件离容器上侧的距离。
              top: 'bottom',
              //title 组件离容器左侧的距离。
              left: 'center'
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: {
              //坐标轴类型。
              type: 'category', //类目轴
              //x轴的刻度名称
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '8月', '10月', '11月', '12月'],
            },
            //直角坐标系 grid 中的 y 轴
            yAxis: {
              //坐标轴类型。value表示数值轴，适用于连续数据。
              type: 'value'
            },
            //提示框组件。
            tooltip: {
              //触发类型。
              trigger: 'item'
            },
            //系列
            series: [
              {
                //系列中的数据内容数组。数组项可以为单个数值
                //data: [120, 200, 150, 80, 70, 110, 130],
                data: activityBarDataArray,
                type: 'bar',
                barWidth: 25,
              }
            ]
          };
          //4、如果已经配置了可选项，然后就把可选项设置到图标对象中去
          option && myChart.setOption(option);*/


          // 获取页面上的DOM元素
          var chartDom = document.getElementById('activityBarChart');
// 初始化ECharts实例
          var myChart = echarts.init(chartDom);

// 配置图表选项
          var option = {
            // 标题组件
            title: {
              text: '市场活动数据统计',
              left: 'center',
              top: 'bottom', // 调整标题与顶部的距离
              textStyle: { // 标题文字样式
                color: '#333',
                fontSize: 18
              }
            },
            // x轴配置
            xAxis: {
              type: 'category',
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: { // x轴线样式
                lineStyle: {
                  color: '#666'
                }
              },
              axisLabel: { // x轴标签样式
                color: '#333',
                fontSize: 12
              }
            },
            // y轴配置
            yAxis: {
              type: 'value',
              axisLine: { // y轴线样式
                lineStyle: {
                  color: '#666'
                }
              },
              axisLabel: { // y轴标签样式
                color: '#333',
                fontSize: 12
              }
            },
            // 提示框组件
            tooltip: {
              trigger: 'item'
            },
            // 系列配置
            series: [
              {
                data: activityBarDataArray,
                type: 'bar',
                barWidth: 25,
                itemStyle: { // 柱状图样式
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#FF6347'}, // 橙红色
                    {offset: 1, color: '#FFA500'}  // 橙色
                  ])
                },
                animationDuration: 1000, // 设置动画持续时间
                animationEasing: 'elasticOut' // 设置动画效果
              }
            ]
          };

// 应用配置项
          option && myChart.setOption(option);

        }
      })
    },

    //加载线索柱状图
    loadClueBarChart() {
      //先查询出来数据，然后再渲染图（不能颠倒，如果你先显示图表，但是没有数据，图表显示不出来）
      doGet("/api/statistic/clueBarChart", {}).then(resp => {
        if (resp.data.code === 200) {
          let xDataArray = resp.data.data.x; //后台返回x轴数据
          let yDataArray = resp.data.data.y; //后台返回y轴数据

         /* //1、根据id获取页面dom元素对象，echarts图表到时候就显示在这个dom元素里面 <div> echarts就显示在这里 </div>
          var chartDom = document.getElementById('clueBarChart');
          //2、用echarts对象对要显示图标的dom元素区域进行初始化
          var myChart = echarts.init(chartDom);
          //3、配置可选项，也就是配置图表的各种显示参数（看文档-->配置项手册）
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '线索数据统计',
              //title 组件离容器上侧的距离。
              top: 'bottom',
              //title 组件离容器左侧的距离。
              left: 'center'
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: {
              //坐标轴类型。
              type: 'category', //类目轴
              //x轴的刻度名称
              //data: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', ......],
              data: xDataArray
            },
            //直角坐标系 grid 中的 y 轴
            yAxis: {
              //坐标轴类型。value表示数值轴，适用于连续数据。
              type: 'value'
            },
            //提示框组件。
            tooltip: {
              //触发类型。
              trigger: 'item'
            },
            //系列
            series: [
              {
                //系列中的数据内容数组。数组项可以为单个数值
                //data: [120, 200, 150, 80, 70, 110, 130],
                data: yDataArray,
                type: 'bar',
                barWidth: 25,
              }
            ]
          };
          //4、如果已经配置了可选项，然后就把可选项设置到图标对象中去
          option && myChart.setOption(option);
*/


// 1. 获取页面中的DOM元素
          var chartDom = document.getElementById('clueBarChart');
// 2. 初始化ECharts实例
          var myChart = echarts.init(chartDom);

// 3. 配置图表选项
          var option = {
            // 标题组件
            title: {
              text: '线索数据统计',
              top: 'bottom',
              left: 'center',
              textStyle: { // 改变标题文字颜色
                color: '#333'
              },
              subtext: '自定义样式', // 添加副标题
              subtextStyle: { // 副标题样式
                color: '#999'
              }
            },
            // X轴
            xAxis: {
              type: 'category',
              data: xDataArray,
              axisLabel: { // X轴标签样式
                color: '#666' // 更改标签颜色
              },
              axisLine: { // X轴线样式
                lineStyle: {
                  color: '#ccc' // 更改轴线颜色
                }
              }
            },
            // Y轴
            yAxis: {
              type: 'value',
              axisLabel: { // Y轴标签样式
                color: '#666' // 更改标签颜色
              },
              axisLine: { // Y轴线样式
                lineStyle: {
                  color: '#ccc' // 更改轴线颜色
                }
              }
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 系列
            series: [{
              name: '线索数量',
              type: 'bar',
              barWidth: 25,
              itemStyle: { // 柱状图样式
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: '#FF6347'}, // 渐变起始颜色
                    {offset: 1, color: '#FFA07A'} // 渐变结束颜色
                  ]),
                  barBorderRadius: 5, // 圆角边框
                  shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色
                  shadowBlur: 10 // 阴影模糊度
                }
              },
              data: yDataArray,
              animationDuration: 1000, // 动画持续时间
              animationEasing: 'elasticOut' // 动画缓动效果
            }]
          };

// 4. 设置图表选项
          option && myChart.setOption(option);

        }
      })
    },

    //加载客户柱状图
    loadCustomerBarChart() {
      //先查询出来数据，然后再渲染图（不能颠倒，如果你先显示图表，但是没有数据，图表显示不出来）
      doGet("/api/statistic/customerBarChart", {}).then(resp => {
        if (resp.data.code === 200) {
          let xDataArray = resp.data.data.x; //后台返回x轴数据
          let yDataArray = resp.data.data.y; //后台返回y轴数据

         /* //1、根据id获取页面dom元素对象，echarts图表到时候就显示在这个dom元素里面 <div> echarts就显示在这里 </div>
          var chartDom = document.getElementById('customerBarChart');
          //2、用echarts对象对要显示图标的dom元素区域进行初始化
          var myChart = echarts.init(chartDom);
          //3、配置可选项，也就是配置图表的各种显示参数（看文档-->配置项手册）
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '客户数据统计',
              //title 组件离容器上侧的距离。
              top: 'bottom',
              //title 组件离容器左侧的距离。
              left: 'center'
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: {
              //坐标轴类型。
              type: 'category', //类目轴
              //x轴的刻度名称
              //data: ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', ......],
              data: xDataArray
            },
            //直角坐标系 grid 中的 y 轴
            yAxis: {
              //坐标轴类型。value表示数值轴，适用于连续数据。
              type: 'value'
            },
            //提示框组件。
            tooltip: {
              //触发类型。
              trigger: 'item'
            },
            //系列
            series: [
              {
                //系列中的数据内容数组。数组项可以为单个数值
                //data: [120, 200, 150, 80, 70, 110, 130],
                data: yDataArray,
                type: 'bar',
                barWidth: 25,
              }
            ]
          };
          //4、如果已经配置了可选项，然后就把可选项设置到图标对象中去
          option && myChart.setOption(option);*/


// 1、获取页面 dom 元素对象
          var chartDom = document.getElementById('customerBarChart');
// 2、初始化 echarts 图表
          var myChart = echarts.init(chartDom);

// 3、配置图表的可选项
          var option = {
            // 标题组件
            title: {
              text: '客户数据统计',
              // 改变标题位置
              top: 'bottom',
              // 居中显示
              left: 'center',
              // 改变标题颜色
              textStyle: {
                color: '#333'
              }
            },
            // x 轴配置
            xAxis: {
              type: 'category',
              // x 轴数据
              data: xDataArray,
              // 改变 x 轴标签的颜色
              axisLabel: {
                color: '#666'
              },
              // 改变 x 轴线的颜色
              axisLine: {
                lineStyle: {
                  color: '#999'
                }
              }
            },
            // y 轴配置
            yAxis: {
              type: 'value',
              // 改变 y 轴标签的颜色
              axisLabel: {
                color: '#666'
              },
              // 改变 y 轴线的颜色
              axisLine: {
                lineStyle: {
                  color: '#999'
                }
              }
            },
            // 提示框组件
            tooltip: {
              trigger: 'item'
            },
            // 系列配置
            series: [
              {
                data: yDataArray,
                type: 'bar',
                // 改变柱状图的颜色
                itemStyle: {
                  color: function(params) {
                    // 根据不同的数据索引使用不同的颜色
                    var colors = ['#5470C6', '#91CC75', '#EE6666', '#73C0DE', '#3BA272', '#FC8452', '#9A60B4'];
                    return colors[params.dataIndex % colors.length];
                  }
                },
                // 改变柱状图宽度
                barWidth: 25
              }
            ]
          };

// 4、将可选项设置到图表对象中
          option && myChart.setOption(option);

        }
      })
    },

    //加载交易统计柱状图
    loadTranBarChart() {
      //先查询出来数据，然后再渲染图（不能颠倒，如果你先显示图表，但是没有数据，图表显示不出来）
      doGet("/api/statistic/tranBarChart", {}).then(resp => {
        if (resp.data.code === 200) {
          let xDataArray = resp.data.data.x; //后台返回x轴数据
          let yDataArray1 = resp.data.data.y1; //后台返回y轴数据
          let yDataArray2 = resp.data.data.y2; //后台返回y轴数据

         /* //1、根据id获取页面dom元素对象，echarts图表到时候就显示在这个dom元素里面 <div> echarts就显示在这里 </div>
          var chartDom = document.getElementById('tranBarChart');
          //2、用echarts对象对要显示图标的dom元素区域进行初始化
          var myChart = echarts.init(chartDom);


          //3、配置可选项，也就是配置图表的各种显示参数（看文档-->配置项手册）
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '交易数据统计',
              //title 组件离容器上侧的距离。
              top: 'bottom',
              //title 组件离容器左侧的距离。
              left: 'center'
            },
            //提示框组件。
            tooltip: {
              //触发类型。
              trigger: 'axis',
              //这是坐标轴指示器（axisPointer）的全局公用设置。
              axisPointer: {
                //阴影指示器
                type: 'shadow'
              }
            },
            //图例组件。
            legend: {
              data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
              left: 'center'
            },
            //工具栏。
            toolbox: {
              //图例是否展示
              show: true,
              //水平还是垂直
              //orient: 'vertical',
              left: 'right',
              top: 'top',
              feature: {
                dataView: {show: true, readOnly: false},
                //动态类型切换
                magicType: {show: true, type: ['line', 'bar', 'stack']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            //x轴
            xAxis: [
              {
                type: 'category',
                //坐标轴刻度相关设置
                axisTick: {show: false},
                //data: ['1', '2', '3', '4', '5', '6', '7', '8']
                data: xDataArray
              }
            ],
            //y轴
            yAxis: [
              {
                type: 'value'
              }
            ],
            //系列
            series: [
              {
                name: '交易',
                type: 'bar',
                barWidth: '45%',
                //不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。
                barGap: '0',
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                //label: labelOption,
                //高亮的图形样式和标签样式。
                emphasis: {
                  //在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果
                  focus: 'series'
                },
                //数据项
                //data: [320, 332, 301, 334, 390]
                data: yDataArray1
              },
              {
                name: '成交',
                type: 'bar',
                barWidth: '45%',
                //label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                //data: [220, 182, 191, 234, 290]
                data: yDataArray2
              }
            ]
          };
          //4、如果已经配置了可选项，然后就把可选项设置到图标对象中去
          option && myChart.setOption(option);*/


          var chartDom = document.getElementById('tranBarChart');
          var myChart = echarts.init(chartDom);

          var option = {
            title: {
              text: '交易数据统计',
              top: 'bottom',
              left: 'center',
              textStyle: {
                color: '#333',
                fontSize: 18
              }
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: '#f5f5f5',
              borderColor: '#ccc',
              borderWidth: 1,
              formatter: function (params) {
                return params[0].name + '<br>' +
                    params.map(function (param) {
                      return param.seriesName + ': ' + param.value;
                    }).join('<br>');
              },
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['交易', '成交'],
              left: 'center',
              itemStyle: {
                color: ['#5470C6', '#91CC75']
              }
            },
            toolbox: {
              show: true,
              left: 'right',
              top: 'top',
              feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            xAxis: [
              {
                type: 'category',
                data: xDataArray,
                axisLine: {
                  lineStyle: {
                    color: '#666'
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: ['#eee']
                  }
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#666'
                  }
                },
                axisLabel: {
                  color: '#333'
                }
              }
            ],
            series: [
              {
                name: '交易',
                type: 'bar',
                barWidth: '45%',
                barGap: '0',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#5470C6'},
                        {offset: 1, color: '#003f9c'}
                      ]
                  ),
                  opacity: 0.8
                },
                emphasis: {
                  focus: 'series'
                },
                data: yDataArray1
              },
              {
                name: '成交',
                type: 'bar',
                barWidth: '45%',
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                        {offset: 0, color: '#91CC75'},
                        {offset: 1, color: '#009e60'}
                      ]
                  ),
                  opacity: 0.8
                },
                emphasis: {
                  focus: 'series'
                },
                data: yDataArray2
              }
            ]
          };

          option && myChart.setOption(option);

        }
      })
    }


  },


}
</script>

<!--<style scoped>
.el-row {
  text-align: center;
}
</style>-->


<style scoped>.statistic-item {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

.clue-count,
.activity-count,
.customer-count,
.transaction-amount {
  margin-bottom: 20px;
}
</style>